<template>
	<div class="drawer">
		<div :class="maskClass" @click="closeByMask"></div>
		<div :class="mainClass" :style="mainStyle" class="main">
			<div class="drawer-head" v-if="withHeader">
				<span>{{ title }}</span>
				<slot name="btn"/>
				<!-- <span class="close-btn" v-show="closable" @click="closeByButton">X</span> -->
			</div>
			<div class="drawer-body">
				<slot />
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			// 用于比较是否修改的旧数据
			oldData: {
				type: Object
			},
			// 用于比较是否修改的当前数据
			newData: {
				type: Object | Array
			},
			// 是否打开
			display: {
				type: Boolean
			},

			// 标题
			title: {
				type: String,
				default: '标题'
			},

			// 是否显示关闭按钮
			closable: {
				type: Boolean,
				default: false
			},

			// 是否显示遮罩
			mask: {
				type: Boolean,
				default: true
			},

			// 是否点击遮罩关闭
			maskClosable: {
				type: Boolean,
				default: true
			},

			// 宽度
			width: {
				type: String,
				default: '400px'
			},

			// 是否在父级元素中打开
			inner: {
				type: Boolean,
				default: false
			},
			isComponentUse:{
				type: Boolean,
				default: false
			},
			withHeader:{
				type: Boolean,
				default: true
			}
		},
		computed: {
			maskClass: function() {
				return {
					'mask-show': (this.mask && this.display),
					'mask-hide': !(this.mask && this.display),
					'inner': this.inner
				}
			},
			mainClass: function() {
				return {
					'main-show': this.display,
					'main-hide': !this.display,
					'inner': this.inner
				}
			},
			mainStyle: function() {
				return {
					width: this.width,
					right: this.display ? '0' : `-${this.width}`,
					borderLeft: this.mask ? 'none' : '1px solid #eee'
				}
			}
		},
		watch:{
			newData:{
				handler(value){
					console.log(value)
				}
			}
		},
		mounted() {
			if (this.inner) {
				let box = this.$el.parentNode
				box.style.position = 'relative'
			}
		},
		methods: {
			closeByMask() {

				if(this.oldData){
					console.log('old',this.oldData)
					console.log('new',this.newData)
					if(JSON.stringify(this.oldData) !== JSON.stringify(this.newData)){
						this.$confirm("存在修改数据未保存，确认关闭？")
								.then((_) => {
									this.$emit('visibleChange', false)
								}).catch(_ => {

								})
					}else{
						this.$emit('visibleChange', false)
					}

					// return
				}else{
					if(!this.isComponentUse){
						this.maskClosable && this.$emit('update:display', false)
					}else{
						this.$emit('visibleChange', false)
					}
				}
				// this.$confirm("确认关闭？")
				// .then((_) => {

				// })
				// .catch((_) => {
				// });


			},
			closeByButton() {
				this.$emit('update:display', false)
			},
		}
	}
</script>

<style lang="less" scoped>
	.drawer {
		.el-drawer.rtl {
			overflow: scroll;
		}

		/* 遮罩 */
		.mask-show {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 10;
			background-color: rgba(0, 0, 0, .5);
			opacity: 0.5;
			transition: opacity .5s;
		}

		.mask-hide {
			opacity: 0;
			transition: opacity .5s;
		}

		/* 滑块 */
		.main {
			position: fixed;
			z-index: 10;
			top: 0;
			height: 100%;
			background: #f5f7fa;
			transition: all 0.5s;
			border-left: 1px solid #eee !important;
		}

		.main-show {
			opacity: 1;
			padding-top: 50px;
		}

		.main-hide {
			opacity: 0;
		}

		/* 某个元素内部显示 */
		.inner {
			position: absolute;
		}

		/* 其他样式 */
		.drawer-head {
			display: flex;
			justify-content: space-between;
			height: 45px;
			line-height: 45px;
			padding: 0 15px;
			font-size: 14px;
			color: #303133;
			border-bottom: 1px solid #eee;

			.close-btn {
				display: inline-block;
				cursor: pointer;
				height: 100%;
				padding-left: 20px;
			}
		}

		.drawer-body {
			font-size: 14px;
			//padding: 15px;
			overflow-y: auto;
			height: 85%;
			margin-bottom: 50px;
		}

		/deep/ .el-drawer__header {
			margin-bottom: 0;
			padding: 8px 16px;
			border-bottom: 1px solid gainsboro;
		}

		/deep/ .el-drawer__body {
			overflow-y: auto;
		}

		/deep/ .el-drawer__header {
			margin-bottom: 12px;
			padding: 8px 20px 8px;
			color: #303133;
		}

		/deep/.el-collapse-item__header {
			color: #303133;
			div:nth-child(1){
				width: 80px;
			}
			div{
				height: 100%;
				line-height: 40px;
			}
			.txt {
				// padding: 0 20px;
				font-family: 'MicrosoftYaHei';
				font-size: 13px;
				color: #606266;
				letter-spacing: 0;
				span{
					display: inline-block;
					line-height: 40px;
				}
				span:nth-child(even) {
					color: #fa6400;
					max-width: 80px;
					width: 50px;
				}

				span:nth-child(odd) {
					// margin-left: 20px;
					width: 60px;
				}
			}
		}

		/deep/.el-input__inner {
			width: 350px;
			height: 32px;
			line-height: 32px;
		}

		.demo-drawer__footer {
			text-align: right;
			padding-right: 1rem;
			border-top: 1px solid #c8cfde;
			background-color: #f5f7fa;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			line-height: 50px;
			//padding-bottom: 0px;
		}

		.el-drawer.ltr,
		.el-drawer.rtl,
		.el-drawer__container {
			top: 0;
			bottom: 0;
			height: 100%;
		}
		/deep/.el-collapse-item__content{
			padding-bottom: 100px;
		}
		.el-drawer {
			position: absolute;
			box-sizing: border-box;
			background-color: #f5f7fa;
			display: flex;
			-ms-flex-direction: column;
			flex-direction: column;
			-webkit-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12);
			box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12);
		}
	}
</style>
